import React, {useEffect, useState} from "react";
import {Button, Descriptions, Drawer, Space, Spin, Tag} from "antd";
import {InfoPermissionProp, PermissionInfoProp} from "@/pages/authority/modules";
import {permissionInfo} from "@/api/permission";
import {Icon} from "@/components";

const InfoPermission: React.FC<InfoPermissionProp> = ({id, visible, close}) => {

    const [spinning, setSpinning] = useState<boolean>(false);
    const [info, setInfo] = useState<PermissionInfoProp>({} as PermissionInfoProp);

    useEffect(() => {
        if (visible) {
            setSpinning(true)
            permissionInfo(id).then(res => {
                setSpinning(false);
                setInfo(res);
            }).finally(() => setSpinning(false))
        }
        return () => setInfo({} as PermissionInfoProp);
    }, [visible])

    return <Drawer
        width={500}
        title="资源详情"
        placement="right"
        onClose={close}
        open={visible}>
        <Spin spinning={spinning}>
            <Descriptions bordered size='middle'>
                <Descriptions.Item label="名称" span={3}>{info.name}</Descriptions.Item>
                <Descriptions.Item label="编码" span={3}><Tag color="red">{info.code}</Tag></Descriptions.Item>
                { info.parentName && <Descriptions.Item label="上级资源" span={3}>{info.parentName}</Descriptions.Item> }
                { info.icon && <Descriptions.Item label="图标" span={3}><Icon icon={info.icon} /></Descriptions.Item> }
                <Descriptions.Item label="类型" span={3}>{info.permType === 1 ? <Tag color="#108ee9">目录</Tag> : (info.permType === 2 ? <Tag color="#87d068">菜单</Tag> : <Tag color="#f50">按钮</Tag>)}</Descriptions.Item>
                { info.path && <Descriptions.Item label="路径" span={3}>{info.path}</Descriptions.Item> }
                <Descriptions.Item label="创建时间" span={3}>{info.createTime}</Descriptions.Item>
                <Descriptions.Item label="创建人" span={3}>{info.createName}</Descriptions.Item>
                { info.updateTime && !info.updateTime.startsWith('0001') && <Descriptions.Item label="修改时间" span={3}>{info.updateTime}</Descriptions.Item> }
                { info.updateName && <Descriptions.Item label="修改人" span={3}>{info.updateName}</Descriptions.Item> }
                <Descriptions.Item label="备注" span={3}>备注</Descriptions.Item>
            </Descriptions>
        </Spin>
    </Drawer>
}

export default InfoPermission;